*{ margin: 0; padding: 0; }
html, body { 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', '微软雅黑', 'Helvetica Neue', sans-serif; 
    font-size: 12px; 
    background-color: #5c50c9;
    width: 100%;
}

section {
    width: 80%;
    height: 16rem;
    padding: 20px 10% 0 10%;
    text-align: center;
}

.title {
	font-size: 22px;
	letter-spacing: 3px;
    color: #ffffff;
}

.content {
    width: 90%;
    height: 10rem;
    padding: 2.3rem 0;
    background: url('../images/background_3.png') no-repeat 0 0;
    background-size: 100% auto;
}

header { 
    width: 100%; height: 35rem;
    background: url('../images/background_0.png') no-repeat 0 0; 
    background-size: 100% auto;
}

section{
    background-color: #5c50c9;
}

.scratch {
    width: 27rem;
    height: 16rem;
    background: url('../images/background_2.png') no-repeat 0 0;
    background-size: 100% auto;
    margin: 0 auto;
    position: relative;
    top: 18em;
}

.scratch_area {
    width: 80%;
    margin: 0 10%;
    position: relative;
    top: 0;
}

#scratch_Img {
    width: 100%;
    position: relative;
    top: -6rem;
}

.awardMark{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 4rem;
    z-index: 3;
}

.awardMark p:first-child{
    font-size: 18px;
	letter-spacing: 1.2px;
    color: #393939;
    text-align: center;
    margin-top: 20px;
}

.awardMark p:last-child{
    width: 137px;
	height: 37.5px;
	background-color: #5146b3;
	box-shadow: 0px 3px 8px 0px 
		rgba(131, 80, 201, 0.36);
    border-radius: 18.75px;
    font-size: 19.6px;
	letter-spacing: 1.45px;
    color: #fcfcfc;
    text-align: center;
    line-height: 37.5px;
    margin: 5px auto 0 auto;
}

.award {
    width: 100%;
    height: 10rem;
    background: url('../images/background_yellow.png') no-repeat 0 0 ;
    background-size: 100% auto;
    text-align: center;
    line-height: 8rem;
    color: #ffffff;
    position: relative;
    top: 4rem;
    font-size: 3.2rem;
}

.scratch_num {
    width: 18.4rem;
	height: 2.8rem;
	background-color: #edb301;
	border-radius: 1.4rem;
    text-align: center;
    line-height: 2.8rem;
	font-size: 1.8rem;
    color: #ffffff;
    margin: 0 auto;
    position: relative;
    top: 2.7rem;
}

.awardMark2{
    display: none;
}

.awardMark2 p:last-child{
    font-size: 18px;
	letter-spacing: 1.2px;
    color: #393939;
    text-align: center;
    background: none;
    border: none;
    box-shadow: unset;
}

.section_a{
    width: 100%;
    height: 3rem;
    padding: 0;
    position: relative;
    z-index: 7;
}

.goAwardList {
    display: flex;
    line-height: 2.5rem;
    text-align: left;
    width: 160px;
    margin: 0 auto;
}

.goAwardList img{
    width: 32px;
	height: 27px;
}

.goAwardList p {
    width: 11rem;
	height: 31px;
	font-size: 1.5rem;
	letter-spacing: 1.6px;
	color: #ffffff;
}

.menberList{
    padding: 40px 10%;
}

.menberList .content div {
    width: 100%;
    font-size: 16px;
    line-height: 26px;
    color: #ffffff;
}

.menberList .content div span:last-child{
    color: #edb301;
}

.awardMenberList{
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 12% 0;
}

.swiper {
    width: 100%;
    height: 104px;
    overflow: hidden;
}

.awardRule {
    height: 20.5rem;
}

.awardRule .content {
    width: 100%;
    height: 18rem;
    background-size: 100% 18rem;
}

.awardRule .content div {
    text-align: left;
    padding: 0 2rem;
    font-size: 1.4rem;
    line-height: 2.7rem;
	color: #ffffff;
}

.awardList .content{ 
    width: 100%;
    display: flex;
}

.awardList .content>div {
    width: 90%;
    padding: 5%;
    display: flex;
}

.awardList .content>div div {
    width: 50%;
    text-align: center;
    font-size: 1.4rem;
	letter-spacing: 1px;
	color: #fbfbfd;
}

.awardList .content>div div img {
    width: 40%;
}

.awardList .content>div div p {
    line-height: 2rem;
}


footer{
    width: 100%;
    height: 2rem;
    background-color: #5c50c9;
}

.seeAwardList{
    width: 80%;
    padding: 2rem 10%;
}

.awards{
    width: 100%;
    height: 5rem;
    padding: 2rem 0;
    background: url('../images/background_1.png') no-repeat 0 0;
    background-size: 100% 9rem; 
    text-align: center;
    color: #fbfbfd;
    margin-bottom: 2rem;
}

.awards:last-child{
    margin: 0;
}

.awards p:first-child{
    font-size: 3rem;
    line-height: 3rem;
}

.awards p:last-child{
    line-height: 2rem;
    font-size: 1.4rem;
}

aside{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0, 0.7);
    z-index: 9;
}

aside div:first-child{
    width: 320px;
    height: 316px;
    background: url('../images/background_red.png') no-repeat 0 0;
    background-size: 100% auto;
    position: absolute;
    z-index: 9;
}

aside div p:first-child{
	font-size: 15px;
	letter-spacing: 0px;
    color: #fdfcfa;
    text-align: center;
    position: relative;
    top: 125px;
}

aside div p:last-child{
    width: 214.5px;
    height: 102.5px;
    line-height: 102.5px;
    position: relative;
    top: 145px;
    left: 52.75px;
    background: url('../images/background_award.png') no-repeat 0 0 ;
    background-size: 100% auto;
    font-size: 24px;
    text-align: center;
	letter-spacing: 2px;
	color: #fbfbfd;
}

.close{
    width: 30.5px;
    height: 30.5px;
    position: absolute;
    background: url('../images/close.png') no-repeat 0 0;
    background-size: 100% auto;
}

@media all and (max-width: 321px){
    html,body{ font-size: 12px !important; } 
    header{ height: 33rem; }
    .scratch { top: 16rem; width: 26rem; }
    section { width: 90%; padding: 20px 5% 0 5%; } 
    .menberList{ padding: 20px 5% }
    .awardMenberList{ padding: 9% 0; }
}

@media all and (max-width: 350px) and (min-width: 322px){
    html,body{ font-size: 12px !important; } 
    header{ height: 33rem; }
    .scratch { top: 16rem; }
    .menberList, section{ width: 90%; padding: 20px 5% }
    .awardMenberList{ padding: 9% 0; }
}

@media all and (max-width: 376px) and (min-width: 350px){
    html,body{ font-size: 13px !important; } 
    header{ height: 35rem; }
    .scratch { top: 18rem; }
    .menberList, section{ width: 90%; padding: 20px 5% }
    .awardMenberList{ padding: 9% 0; }
}

@media all and (max-width: 421px) and (min-width: 377px){
    html,body{ font-size: 13px !important; } 
    .scratch { top: 18.5rem; width: 29rem; height: 18rem }
    header{ height: 37rem; }
    .awardRule .content div{ font-size: 1.2rem; }
    section { padding: 20px 10% } 
    .awardMenberList{ padding: 10% 0; }
    .goAwardList p{ font-size: 16px }
}

@media all and (max-width: 464px) and (min-width: 422px){
    header{ height: 42rem; }
    .scratch { top: 22rem; width: 29rem; height: 18rem }
    section { padding: 20px 10% } 
    .awardRule .content div{ width: 90% }
}

@media all and (max-width: 480px) and (min-width: 465px){
    header{ height: 42rem; }
    .scratch { top: 24rem; width: 29rem; height: 18rem }
    section { padding: 20px 10% } 
    .awardRule .content div{ width: 90% }
}

@media all and (max-width: 600px) and (min-width: 481px){
    header{ height: 44rem; }
    .scratch { top: 24rem; width: 33rem; height: 18rem }
    .award{ line-height: 10rem; }
    section { height: 17.5rem;padding: 20px 10% } 
    .awardRule .content div{ width: 90% }
    .content{ height: 12rem; }
    .awardList { height: 19rem; }
    .awardList .content{ padding: 3rem 0; }
    .awardRule .content{ height: 16rem; }
}
